<template>
  <div class="container">
    <div class="head">
      <div class="head_left">{{ leftDate }} &nbsp; &nbsp; {{ rightTime
        }}</div>
      <div class="head_center">{{ title }}</div>
      <div class="head_right">
        <img src="../assets/images/backManagement.png" style="width: 30px;transform: scale(0.8);">
        &nbsp;
        <img src="../assets/images/outLogin.png" style="width: 100px;" @click="logout">
      </div>
    </div>
    <div class="v-x">
      <!-- 大屏开始 -->
      <home />
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
// 引入用到的主页面
import home from './bigView/home/index.vue'
// 标题
const title = import.meta.env.VITE_APP_TITLE

//#region 退出系统
import { ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
  function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index';
    })
  })
}
//#endregion

//#region 获取日期时间
const leftDate = ref(); // 左侧日期
const rightTime = ref() // 右侧时间
setInterval(() => {
  const date = new Date(); // 获取当前日期和时间
  const year = date.getFullYear(); // 获取年份
  const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，注意要补零
  const day = ('0' + date.getDate()).slice(-2); // 获取日期，注意要补零
  // const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()]; // 获取星期几
  // leftDate.value = `${year}-${month}-${day} ${weekday}`; // 组合格式化后的日期和时间
  leftDate.value = `${year}.${month}.${day}`; // 组合格式化后的日期和时间
  const hour = ('0' + date.getHours()).slice(-2); // 获取小时，注意要补零
  const minute = ('0' + date.getMinutes()).slice(-2); // 获取分钟，注意要补零
  const second = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，注意要补零
  rightTime.value = `${hour}:${minute}:${second} `; // 组合格式化后的日期和时间
}, 1000);
//#endregion
</script>
<style scoped lang="scss">
.container {
  background-image: url(@/assets/images/bg.png); // @ 代表src文件夹
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: 2vh;
  box-sizing: border-box;
  user-select: none;

  // 头部
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: -1vh;
    margin-bottom: 0vh;

    div {
      flex: 1;
    }

    .head_center {
      text-align: center;
      padding-top: 25px;
      font-size: 30px;
      color: #fff;
      font-weight: 700;
      letter-spacing: 5px;
    }

    .head_left {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding-left: 10px;
    }

    .head_right {
      color: #0aaaec;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      justify-content: flex-end;
    }
  }

  // 开始大屏内容
  .v-x {
    display: flex;
    flex: 1;
  }
}
</style>